<template>
  <div>
    <el-table border class="inputcolumn" :data="infoList" v-if="infoList" ref="infoList" >
      <!-- <el-table-column prop="productUid" label="ID" width="40" align="center">
      </el-table-column> -->
      <el-table-column prop="carouselImgOne" label="图片" width="100" align="center">
        <template slot-scope="scope">
          <el-image v-if="
              scope.row.carouselImgOne != null && scope.row.carouselImgOne != ''
            " slot="reference" :src="scope.row.carouselImgOne" class="image-rows"
            :preview-src-list="[scope.row.carouselImgOne]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="productName" label="商品名称" min-width="130" align="left">
      </el-table-column>
      <el-table-column prop="retailPriceStr" label="商品价格(元)" width="100" align="center">
      </el-table-column>
      <el-table-column prop="stockNumber" label="商品库存" width="80" align="center">
      </el-table-column>
      <el-table-column prop="limitsNumber" label="每人限购" align="center" v-if="activityType != 'packages'">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.limitsNumber" oninput="value=value.replace(/[^\d]/g,'')" maxlength="4"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="activityPrice" label="活动价格(元)" align="center" v-if="activityType != 'packages'">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.activityPriceStr" @input="scope.row.activityPriceStr = oninput(scope.row.activityPriceStr, 2)"
            align="center" maxlength="9" :disabled="isDisabled"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="activityStock" label="活动库存" align="center" v-if="activityType != 'packages'">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.activityStock" oninput="value=value.replace(/[^\d]/g,'')" maxlength="7"  align="center"></el-input>
        </template>
      </el-table-column>
      <el-table-column v-if="activityType == 'bargain'" prop="needPerson" label="助力人数" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.needPerson" oninput="value=value.replace(/[^\d]/g,'')" maxlength="4" align="center"></el-input>
        </template>
      </el-table-column>
      <el-table-column v-if="activityType == 'group'" prop="needPerson" label="成团人数" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.needPerson" oninput="value=value.replace(/[^\d]/g,'')" maxlength="4" align="center"></el-input>
        </template>
      </el-table-column>

      <el-table-column v-if="activityType == 'score' " prop="activityScore" label="所需积分" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.activityScore" oninput="value=value.replace(/[^\d]/g,'')" maxlength="6" align="center"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="receiveNumber" width="80" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDeleteser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-if="activityType != 'packages'" style="margin-top: 10px">
      <span class="label" style="font-size: 14px; color: #666">批量设置：</span>
      <template v-if="isSetListShow">
        <template v-for="item in thList">
          <el-button :key="item.name" size="mini" v-if="item.type" @click="openBatch(item.type)">{{ item.name }}
          </el-button>
        </template>
      </template>
      <template v-else>
        <div class="inline-block" v-for="item in thList" :key="item.name">
          <el-input v-if="item.type && currentType === item.type" size="mini" style="width: 200px" type="text"
            :key="item.name" v-model.number="batchValue" :placeholder="item.name" @keyup.native.enter="setBatch">
          </el-input>
        </div>

        <el-button style="margin-left: 20px" type="primary" size="mini" @click="setBatch">
          <i class="set-btn blue el-icon-check"></i>
        </el-button>

        <el-button type="danger" size="mini" @click="cancelBatch">
          <i class="set-btn blue el-icon-close"></i>
        </el-button>
      </template>
    </div>

  </div>
</template>
<script>
  import {delInfoPro} from "@/api/activity/info";
  export default {
    props: {
      selectedData: {
        type: Array,
        default: [],
      },
      activityType: {
        type: String,
        default: [],
      },
    },
    data() {
      return {
        infoList: [],
        isDisabled: false,
        isSetListShow: true, // 批量设置状态
        currentType: "", // 批量设置绑定的类型
        batchValue: "", // 批量设置绑定的值
        thList: [
          {
            type: "limitsNumber",
            name: "每人限购"
          },
          {
            type: "activityPriceStr",
            name: "活动价格"
          },
          {
            type: "activityStock",
            name: "活动库存"
          },
        ],
      }
    },
    created() {
      if(this.activityType){
        let th = {};
        switch (this.activityType){
          case 'score':
            th = {type: "score",name: "所需积分"};
            break;
          case 'bargain':
            th = {type: "needPerson", name: "助力人数"};
            break;
          case 'group':
            th = {type: "needPerson", name: "成团人数"};
            break;
          case 'free':
            this.isDisabled = true;
            break;
          // case 'score':
          //   th = {type: "score",name: "所需积分"};
          //   break;
        }
        this.thList.push(th);
      }
      this.infoList = JSON.parse(JSON.stringify(this.selectedData));
    },
    methods: {
      handleDeleteser(val, row) {
        // 模态框删除按钮
        this.$confirm("是否确认删除本条数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info",
        }).then(() => {
          console.log(row)
          if(row.activityProUid){
            delInfoPro(row.activityProUid);
          }
          this.infoList.splice(val, 1);
          this.selectedData.splice(val,1);
        });
      },
      //给父组件调用
      getData(){
        return this.infoList;
      },
      // 批量设置
      setBatch() {
        //深拷贝，处理批量设置后，无法修改问题
        let proList = JSON.parse(JSON.stringify(this.infoList));
        if (typeof this.batchValue === "string") {
          this.$message({
            type: "warning",
            message: "请输入正确的值"
          });
          return;
        }
        this.infoList = null;//刷新表格数据
        this.$nextTick(() =>{
          proList.forEach((item) => {
            item[this.currentType] = this.batchValue;
          });
          this.infoList = JSON.parse(JSON.stringify(proList));
          this.cancelBatch();
        })
      },
      cancelBatch() {
        // this.infoList.forEach((item) => {
        //   item.picArr = [];
        // });
        this.batchValue = "";
        this.currentType = "";
        this.isSetListShow = true;
      },
      openBatch(type) {
        this.currentType = type;
        this.isSetListShow = false;
      },
      oninput(num, limit) {
        var str = num;
        var len1 = str.substr(0, 1);
        var len2 = str.substr(1, 1);
        if (str.length > 1 && len1 == 0 && len2 != ".") {
          str = str.substr(1, 1);
        }
        if (len1 == ".") {
          str = "";
        }
        if (str.indexOf(".") != -1) {
          var str_ = str.substr(str.indexOf(".") + 1);
          if (str_.indexOf(".") != -1) {
            str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
          }
        }
        //正则替换
        str = str.replace(/[^\d^\.]+/g, ""); // 保留数字和小数点
        if (limit / 1 === 1) {
          str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, "$1"); // 小数点后只能输 1 位
        } else {
          str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, "$1"); // 小数点后只能输 2 位
        }
        return str;
      },
    },
  };
</script>
<style scoped>
  .el-input {
    width: 100px;
    text-align: center;
  }
  .image-rows {
    width: 75px;
    height: 75px;
  }
</style>
